<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<div style="width:100%;height:40px;padding:8px;">
                     <form id="pagerForm" data-toggle="ajaxsearch" method="post" action="<%=request.getContextPath()%>/equi/selectIndex.do" >
                       <label>地区：</label>
                       <select name="areaCode" id="areaCode">
                         <option value="">请选择</option>
                         <c:forEach var="area" items="${areaList}">
                          <option value="${area.ucode}">${area.uname}</option>
                         </c:forEach>
                       </select>
                       <script language="javascript">
                         $.CurrentNavtab.find("#areaCode").val("${rtus.areaCode}");
                       </script>
                       <label>测点名称:</label>
                       <input type="text" name="stationname" id="stationname" value="${rtus.stationname}"/>
                     <button type="submit" class="btn-default" data-icon="refresh">搜索</button>
	            	<button type="button" class="btn-default" onclick="kong()">清空</button>
    				  <input type="hidden" id="sname">
	            	 <input type="hidden" id="level">
	            	 <input type="hidden" id="temp">
	            	 <input type="hidden" id="lng">
	            	 <input type="hidden" id="lat">
    				  </form>
    				  
				<a href="#" id="rtuEqui" 
    				  class="on-default edit-row" data-toggle="navtab" data-id="equiView" data-width="500" data-height="500" 
    				  data-id="dialog-mask" data-title="查看信息" data-mask="true" style="display:none"></a>
                    </div>
                    <div id="mapDiv" style="position:absolute;width:100%; height:99%"></div> 
					<script language="javascript">
					function kong(){
					$("#stationname").val("");
					$(".btn-default").blur(); 
					}
					function loadMap() 
	{
	   
		//初始化地图对象 
	   	var map=new TMap("mapDiv"); 
		var zoom = 9;
		var num = ${zoom};		
		if(num > 1)
		{
			zoom = 9;
		}
		
		var lng = ${lng};		
		var lat = ${lat};
		var markerClusterer;
		
	   	//设置显示地图的中心点和级别 ,根据当前登录人来确定经纬度
		map.centerAndZoom(new TLngLat(lng,lat),zoom); 
		//允许鼠标滚轮缩放地图 
		map.enableHandleMouseScroll(); 
		var pt = ${data};		
		var markers = []; 		 		
		for (var i = 0; i < pt.length; i++) { 					    
			 var lnglat = new TLngLat(pt[i].longitude, pt[i].latitude);
			 var market = new TMarker(lnglat);
			 markers.push(market);								
			TEvent.addListener(market,"click",function(p){
			  
				var lngg = this.getLngLat().getLng();
				var latt = this.getLngLat().getLat();
				try{
				$("#bjui-container").navtab('closeTab','equiView');
				}catch(e){alert(e.message);}
				var btn = $.CurrentNavtab.find("#rtuEqui");
				var url = "<%=request.getContextPath()%>/equi/selectEquipLine.do";
				var str = url.split("?");
				var href = str[0] + "?"+Math.random()+"="+Math.random()+"&longitude=" + lngg +"&latitude=" + latt;		
				try{
				$(p).navtab({id:'equiView', url:href, title:'查看数据'});
				}catch(e){alert(e.message);}
            });
            TEvent.addListener(market,"mouseover",function(){
             var lngg = this.getLngLat().getLng();
			 var latt = this.getLngLat().getLat();
             var url = "<%=request.getContextPath()%>/equi/selectEquipAjax.do";
			 var str = url.split("?");
			 var href = str[0] + "?"+Math.random()+"="+Math.random()+"&longitude=" + lngg +"&latitude=" + latt;
			 var html=[]; 
             html.push('<div style="height:78px;">');
             $.ajax({
             scriptCharset:"utf-8",
             contentType:"application/x-www-form-urlencoded;charset=utf-8",
             dataType:"json", 
             type:"post",
             url:href,
             async:false,
             success:function(data1){
             //var json=eval("("+data1[0]+")");
				$("#sname").val(data1.stationname);
				$("#level").val(data1.waterlevel);
				$("#temp").val(data1.watertemperature);
             }
             });
             html.push('<ul>');
             html.push('<li><b>属性数据</b></li>');
             html.push('<li>设备名称:'+$("#sname").val()+'</li>');
             html.push('<li>水&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:'+$("#level").val()/1000+'m</li>');
             html.push('<li>水&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;温:'+$("#temp").val()+'°</li>');
             html.push('</ul>');
             html.push('</div>');
             var config = {
	            offset:new TPixel(0,0),
	            position:this.getLngLat()
	         };
	         customerWinInfo=new TLabel(config);
	         customerWinInfo.setTitle('');
	         customerWinInfo.setLabel(html.join(''));
	         customerWinInfo.getObject().style.zIndex = 10000;
	         map.addOverLay(customerWinInfo);
	         var obj = customerWinInfo.getObject();
	         var width = parseInt(obj.offsetWidth);
	         var height = parseInt(obj.offsetHeight);
	         var icon = this.getIcon();
	         var anchor_icon = icon.getAnchor();
	         var pixel = new TPixel(width/-2,height/-2-anchor_icon[1]);
	         customerWinInfo.setOffset(pixel); 
             });
             TEvent.addListener(market,"mouseout",function(){
	         map.removeOverLay(customerWinInfo);
	     }); 
            
			
	
		} 
		var config = { 
				markers:markers
		};
		//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。 
		markerClusterer = new TMarkerClusterer(map,config);
	} 
					loadMap();
					</script>